<template>
  <div class="singer">
    <div class="singer-wrapper">
      <ScrollView ref='scrollView'>
          <ul class="list-wrapper">
              <li class="list-group" v-for="(value,index) in list" :key="index" ref="group">
                <h2 v-if="keys[index]!=='['" class="group-title">{{keys[index]}}</h2>
                <ul v-if="keys[index]!=='['">
                  <li class="group-item" v-for="obj in list[index]" :key="obj.id" @click.stop="switchSinger(obj.id)">
                    <img v-lazy="obj.picUrl" alt="">
                    <p>{{obj.name}}</p>
                  </li>
                </ul>
              </li>
            </ul>
        </ScrollView>
        <ul class="list-keys">
          <li v-for="(key,index) in keys"
          :key='key'
          :data-index='index'
          @touchstart.stop.prevent='touchstart'
          @touchmove.stop.prevent='touchmove'
          :class="{'active':currentIndex===index}"
          v-show="key!=='['"
          >{{key}}</li>
        </ul>
        <div class="fix-title" v-show="fixTitle !== ''" ref="fixTitle">{{fixTitle}}</div>
    </div>

    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getAllArtists } from '../api/index'
import ScrollView from '../components/ScrollView.vue'
import MetaInfo from '../../vue-meta-info'
export default {
  name: 'Singer',
  metaInfo: MetaInfo.singer,
  created () {
    getAllArtists()
      .then((result) => {
        // console.log(result)
        this.keys = result.keys
        this.list = result.list
      })
      .catch(function (err) {
        console.log(err)
      })
  },
  mounted () {
    this.$refs.scrollView.scrolling((y) => {
      this.scrollY = y
      if (y >= 0) {
        this.currentIndex = 0
        return
      }
      for (let i = 0; i < this.groupsTop.length - 1; i++) {
        const preTop = this.groupsTop[i]
        const nextTop = this.groupsTop[i + 1]
        if (-y >= preTop && -y <= nextTop) {
          this.currentIndex = i
          // 用下一组标题的偏移 + 当前滚动出去的偏移
          const diffOffsetY = nextTop + y
          let fixTitleOffsetY = 0
          if (diffOffsetY >= 0 && diffOffsetY <= this.fixTitleHeight) {
            fixTitleOffsetY = diffOffsetY - this.fixTitleHeight
          } else {
            fixTitleOffsetY = 0
          }
          if (fixTitleOffsetY === this.fixTitleOffsetY) { return }
          this.fixTitleOffsetY = fixTitleOffsetY
          this.$refs.fixTitle.style.transform = `translateY(${fixTitleOffsetY}px)`
          return
        }
      }
      this.currentIndex = this.groupsTop.length - 1
    })
  },
  data () {
    return {
      keys: [],
      list: [],
      groupsTop: [],
      currentIndex: 0,
      beginOffsetY: 0,
      moveOffsetY: 0,
      scrollY: 0,
      fixTitleOffsetY: 0
    }
  },
  components: {
    ScrollView
  },
  methods: {
    keyDown (index) {
      this.currentIndex = index
      const offsetY = this.groupsTop[index]
      this.$refs.scrollView.scrollTo(0, -offsetY, 150)
    },
    touchstart (e) {
      const index = parseInt(e.target.dataset.index)
      this.keyDown(index)
      // 获取第一个手指
      this.beginOffsetY = e.touches[0].pageY
    },
    touchmove (e) {
      this.moveOffsetY = e.touches[0].pageY
      const offsetY = (this.moveOffsetY - this.beginOffsetY) / e.target.offsetHeight
      let index = parseInt(e.target.dataset.index) + Math.floor(offsetY)
      if (index < 0) {
        index = 0
      } else if (index > this.keys.length - 1) {
        index = this.keys.length - 1
      }
      this.keyDown(index)
    },
    switchSinger (id) {
      this.$router.push(`/singer/detail/${id}/singer`)
    }
  },
  watch: {
    list (newValue, oldValue) {
      this.$nextTick(() => {
        this.$refs.group.forEach(group => {
          this.groupsTop.push(group.offsetTop)
        })
      })
    },
    fixTitle (newValue, oldValue) {
      this.$nextTick(() => {
        this.fixTitleHeight = this.$refs.fixTitle.offsetHeight
      })
    }
  },
  computed: {
    fixTitle () {
      if (this.scrollY >= 0) {
        return ''
      } else {
        return this.keys[this.currentIndex]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
@import "../assets/css/mixin";
@import "../assets/css/variable";
.singer{
  width: 100%;
  height: 100%;
  .singer-wrapper{
 position: fixed;
  top: 184px;
  bottom: 0;
  left: 0;
  right: 0;
  @include bg_sub_color();
  overflow: hidden;
  padding-bottom: 450px;
  .list-wrapper{
    .list-group{
      .group-title{
        @include bg_color();
        @include font_size($font_medium);
        color: white;
        padding: 10px 20px;
        box-sizing: border-box;
      }
      .group-item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 2px solid #ccc;
        img{
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        p{
          @include font_size($font_medium);
          @include font_color();
          margin-left: 20px;
        }
      }
    }
  }
  .list-keys{
    position: fixed;
    right: 10px;
    top: 55%;
    transform: translateY(-50%);
    li{
      @include font_color();
      @include font_size($font_medium_s);
      padding: 3px 0;
      &.active{
        text-shadow: 0 0 10px #000;
      }
    }
  }
  .fix-title{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px 20px;
    box-sizing: border-box;
    @include font_size($font_medium);
    color: white;
    @include bg_color();
  }
  }

  .v-enter{
  transform: translateX(100%);
}
.v-enter-to{
  transform: translateX(0%);
}
.v-enter-active{
  transition: transform .3s;
}
.v-leave{
  transform: translateX(0%);
}
.v-leave-to{
  transform: translateX(100%);
}
.v-leave-active{
  transition: transform .3s;
}
}
</style>
